<!-- <template>
  <el-form
    ref="addRef"
    :model="add"
    :rules="rules"
    label-width="120px"
    :size="formSize"
    status-icon
  >
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="add.name" style="width:300px" />
    </el-form-item>

    <el-form-item label="Resources" prop="resource">
      <el-radio-group v-model="add.resource">
        <el-radio label="Sponsorship" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form" prop="desc">
      <el-input v-model="add.desc" type="textarea" style="width:300px"  />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(addRef)"
        >Create</el-button
      >
      <el-button @click="resetForm(addRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const formSize = ref('default')
const addRef = ref<FormInstance>()
const add = reactive({
  name: '',
  resource: '',
  desc: '',
})

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '不能为空', trigger: 'blur' },
  ],
  resource: [
    {
      required: true,
      message: '不能为空',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: '不能为空', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script> -->
